<template>
    <section class="conn">
        <header class="header">
            <my-header></my-header>
            root:{{num}}
        </header>
        <div class="main">
            <div class="content">
                <my-main msg="" :title="msg" :article="article"></my-main>
            </div>
            <div class="sidebar">
                <my-sidebar></my-sidebar>
            </div>
        </div>
        <footer class="footer">
            <my-footer></my-footer>
        </footer>
    </section>
</template>

<script>
    import MyHeader from "./components/MyHeader";
    import MyMain from "./components/MyMain";
    import MySidebar from "./components/MySidebar";
    import MyFooter from "./components/MyFooter";

    export default {
        name: 'App',
        data() {
            return {
                msg: 'this is app data msg',
                article: [
                    1,
                    2,
                    3,
                    4,
                    5,
                    6,
                ],
                num: 0,
            }
        },
        components: {
            MyHeader,
            MyMain,
            MySidebar,
            MyFooter,
        },
        methods: {
            appmet() {
                this.num++;
            }
        }
    }
</script>

<style scoped lang="scss">
    $width: 600px;
    $color1: #ccc;
    $color2: #888;

    html, body, ul, li, img {
        margin: 0px;
        padding: 0px;
    }

    .conn {
        width: $width;
        background: $color1;
        height: 500px;
        margin: 0 auto;
    }

    .header {
        float: left;
        width: $width;
        height: 80px;
        background: $color2;
    }

    .main {
        width: 100%;
        height: 300px;
        background: blanchedalmond;
    }

    .content {
        width: 60%;
        float: left;
        background: $color1;
        height: 300px;
    }

    .sidebar {
        width: 40%;
        float: right;
        background: greenyellow;
        height: 300px;
    }
</style>
